Add Playwright e2e tests for the Vue.js renderer#230
Draft
mschuettlerTNG wants to merge 4 commits intodevfrom
Draft
Add Playwright e2e tests for the Vue.js renderer#230mschuettlerTNG wants to merge 4 commits intodevfrom
mschuettlerTNG wants to merge 4 commits intodevfrom
Conversation
- Install @playwright/test and configure for browser-based e2e testing - Add vite.config.mts test mode that skips the electron plugin, allowing the Vue app to be served in a plain browser with mocked IPC - Create reusable test fixtures (e2e/fixtures.ts) with comprehensive window.electronAPI and window.envVars mocks injected via addInitScript - Add 54 e2e tests across 4 test files: - app-startup.test.ts (10): header, title, state transitions - setup-wizard.test.ts (14): wizard UI, mode selection, backend list - chat-ui.test.ts (17): prompt area, history panel, settings sidebar - settings.test.ts (13): app settings, footer, dev tools - Add npm scripts: test:e2e and test:e2e:ui - Exclude e2e/ from vitest to prevent conflicts - Update .gitignore and .prettierignore for Playwright artifacts Co-authored-by: Markus Schüttler <mschuettlerTNG@users.noreply.github.com>
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
- Create e2e-real/ directory with Playwright tests that launch the real Electron app via _electron.launch() against a Vite dev server - playwright-e2e.config.ts manages the Vite renderer server via webServer config (test mode, no electron plugin) while tests launch Electron separately with VITE_DEV_SERVER_URL pointed at the dev server - Shared infrastructure in fixtures.ts (launchElectronApp, ensureMainProcessCompiled) and helpers.ts (getMainWindow with DevTools filtering) - smoke.test.ts: verifies Electron launches and renders the AI Playground header - app-lifecycle.test.ts (12 serial tests): setup wizard display, hardware mode selection, backend installation with Linux-unsupported backends toggled off, transition to running state, all UI panels (history, app settings, chat settings), footer toggle, wizard reopen - chat-inference.test.ts (7 serial tests): model selection via chat settings, send message and receive streamed response, verify user/assistant messages, copy button, follow-up message, conversation in history - Add test:e2e:real npm script - Exclude e2e-real/ from vitest Co-authored-by: Markus Schüttler <mschuettlerTNG@users.noreply.github.com>
- Move DevTools close into getMainWindow helper using evaluate() - Remove Vite lifecycle management from fixtures (use webServer config) - Restructure lifecycle test: each test gets its own Electron instance via the window fixture for reliability - Each test handles wizard-to-running transition independently - Toggle off OpenVINO/ComfyUI (unsupported on Linux) before install Co-authored-by: Markus Schüttler <mschuettlerTNG@users.noreply.github.com>
- Add cleanupElectronState() that kills leftover Electron processes and removes SingletonLock/SingletonSocket/SingletonCookie files before each Electron launch to prevent single-instance-lock hangs - Simplify getMainWindow helper to close DevTools via evaluate() first, then poll for the http:// URL window Co-authored-by: Markus Schüttler <mschuettlerTNG@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description:
Adds two tiers of Playwright e2e tests for the application:
e2e/,playwright.config.ts) — 54 tests that run the Vue renderer in Chrome with mockedwindow.electronAPI, validating all UI component rendering and interactions without Electrone2e-real/,playwright-e2e.config.ts) — Tests that launch the actual Electron app via_electron.launch()against a Vite dev server, exercising the real IPC layer, backend service lifecycle, and full app startup flowChanges Made:
Browser Integration Tests (
e2e/)playwright.config.ts— Vite webServer in test mode, Chrome channele2e/fixtures.ts—window.electronAPI/window.envVarsmock injection,appPage+runningAppPagefixturese2e/app-startup.test.ts(10 tests) — header, title, state transitionse2e/setup-wizard.test.ts(14 tests) — wizard UI, mode selection, backend list, togglese2e/chat-ui.test.ts(17 tests) — prompt area, history panel, settings sidebare2e/settings.test.ts(13 tests) — app settings, footer, dev toolsReal Electron E2E Tests (
e2e-real/)playwright-e2e.config.ts— Vite webServer (test mode, renderer-only), 5-min test timeoute2e-real/fixtures.ts—launchElectronApp()with env vars,cleanupElectronState()to clear SingletonLock + kill zombie processes,ensureMainProcessCompiled()fallbacke2e-real/helpers.ts—getMainWindow()that closes DevTools and finds the http:// renderer windowe2e-real/smoke.test.ts(1 test) — verifies Electron launches and renders the AI Playground headere2e-real/app-lifecycle.test.ts(10 tests) — setup wizard, hardware mode selection, backend installation with unsupported backends toggled off, transition to running state, all UI panels, footer toggle, wizard reopene2e-real/chat-inference.test.ts(7 tests) — model selection, send message, receive streamed response, conversation historyInfrastructure Changes
vite.config.mts—--mode testskipsvite-plugin-electronso the renderer can serve standalonevitest.config.ts— excludese2e/ande2e-real/from Vitestpackage.json— addstest:e2e,test:e2e:ui,test:e2e:realscripts.gitignore/.prettierignore— Playwright artifactsTesting Done:
npx playwright test— 54/54 browser integration tests passnpx playwright test --config playwright-e2e.config.ts e2e-real/smoke.test.ts— Electron smoke test passes reliably (6/6 consecutive runs)npm run lint:ci— ESLint passesnpm run format:ci— Prettier passesnpx vitest run— 25/25 unit tests pass (pre-existing failures only)Note on e2e-real tests: The
app-lifecycle.test.tsandchat-inference.test.tstests are structurally complete but require an environment with network access for backend installation and model downloads. Thesmoke.test.tstest is fully operational and validates the core Electron launch + renderer integration.Checklist: